<template>
	<el-card>
		<template #header>
			<div class="card-header">
				<span>热门主题</span>
			</div>
		</template>
		<TopicItem showIcon v-for="(item, index) in hotList" :data="item" :index="index"/>
	</el-card>
</template>
<script setup lang="ts">
import {hot_rankings} from '/@/api/forum'
import {onMounted, ref, onUnmounted} from 'vue'
import TopicItem from './TopicItem.vue'
import emitter from '/@/utils/emitter.js'

const hotList = ref([])

const getData = async ()=> {
	const res = await hot_rankings({page: 1,page_size: 10})
	hotList.value = res.data
}

onMounted(async ()=> {
	getData()
	//接收兄弟组件 FormDialog.vue 发布主题后更新数据的请求
	emitter.on('loadHosts', getData)
})

onUnmounted(()=> {
	emitter.off('loadHosts', getData)
})
</script>
<style scoped lang="scss">

</style>
